<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">id</label>
        <el-input v-model="query.id" clearable placeholder="id" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">手机号</label>
        <el-input v-model="query.phone" clearable placeholder="手机号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <!--        <label class="el-form-item-label">微信openid</label>-->
        <!--        <el-input v-model="query.openid" clearable placeholder="微信openid" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <label class="el-form-item-label">昵称</label>
        <el-input v-model="query.nickname" clearable placeholder="昵称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">性别</label>
        <el-input v-model="query.gender" clearable placeholder="性别" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">年龄</label>
        <el-input v-model="query.age" clearable placeholder="年龄" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">所在地</label>
        <el-input v-model="query.location" clearable placeholder="所在地" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <!--        <label class="el-form-item-label">维度</label>-->
        <!--        <el-input v-model="query.latitude" clearable placeholder="维度" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">经度</label>-->
        <el-input v-model="query.longitude" clearable placeholder="经度" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">签名</label>
        <el-input v-model="query.signature" clearable placeholder="签名" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">身高</label>
        <el-input v-model="query.height" clearable placeholder="身高" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <!--        <label class="el-form-item-label">星座</label>-->
        <!--        <el-input v-model="query.constellation" clearable placeholder="星座" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">职位</label>-->
        <el-input v-model="query.occupation" clearable placeholder="职位" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">收入</label>
        <el-input v-model="query.income" clearable placeholder="收入" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">学历</label>
        <el-input v-model="query.education" clearable placeholder="学历" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">学校</label>
        <el-input v-model="query.school" clearable placeholder="学校" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <!--        <label class="el-form-item-label">是否学生</label>-->
        <!--        <el-input v-model="query.isStudent" clearable placeholder="是否学生" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">公司</label>-->
        <!--        <el-input v-model="query.company" clearable placeholder="公司" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">是否有房</label>-->
        <!--        <el-input v-model="query.houseStatus" clearable placeholder="是否有房" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">是否有车</label>-->
        <!--        <el-input v-model="query.carStatus" clearable placeholder="是否有车" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">家乡</label>-->
        <!--        <el-input v-model="query.hometown" clearable placeholder="家乡" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">工作地</label>-->
        <!--        <el-input v-model="query.workLocation" clearable placeholder="工作地" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <label class="el-form-item-label">婚姻状态</label>
        <el-input v-model="query.maritalStatus" clearable placeholder="婚姻状态" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">是否实名认证</label>
        <el-input v-model="query.isRealNameVerified" clearable placeholder="是否实名认证" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">是否头像认证</label>
        <el-input v-model="query.isAvatarVerified" clearable placeholder="是否头像认证" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <!--        <label class="el-form-item-label">标签</label>-->
        <!--        <el-input v-model="query.tags" clearable placeholder="标签" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">上级id</label>-->
        <!--        <el-input v-model="query.parentId" clearable placeholder="上级id" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">状态</label>-->
        <!--        <el-input v-model="query.status" clearable placeholder="状态" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">店铺状态</label>-->
        <!--        <el-input v-model="query.isShop" clearable placeholder="店铺状态" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <label class="el-form-item-label">是否在线</label>
        <el-input v-model="query.isOnline" clearable placeholder="是否在线" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">最后活跃时间</label>
        <el-input v-model="query.lastActive" clearable placeholder="最后活跃时间" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">是否认证</label>
        <el-input v-model="query.isVerified" clearable placeholder="是否认证" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="id">
            <el-input v-model="form.id" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.phone" style="width: 370px;" />
          </el-form-item>
          <!--          <el-form-item label="微信openid">-->
          <!--            <el-input v-model="form.openid" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <el-form-item label="昵称">
            <el-input v-model="form.nickname" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="头像">
            <el-input v-model="form.avatar" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-for="item in dict.gender_status" :key="item.id" v-model="form.gender" :label="item.value">{{ item.label }}</el-radio>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="所在地">
            <el-input v-model="form.location" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="维度">
            <el-input v-model="form.latitude" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="经度">
            <el-input v-model="form.longitude" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="签名">
            <el-input v-model="form.signature" style="width: 370px;" />
          </el-form-item>
          <!--          <el-form-item label="创建时间" prop="createdAt">-->
          <!--            <el-input v-model="form.createdAt" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="更新时间">-->
          <!--            <el-input v-model="form.updatedAt" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="密码">-->
          <!--            <el-input v-model="form.password" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <el-form-item label="身高">
            <el-input v-model="form.height" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="星座">
            <el-input v-model="form.constellation" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="职位">
            <el-input v-model="form.occupation" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="收入">
            <el-input v-model="form.income" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="学历">
            <el-input v-model="form.education" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="学校">
            <el-input v-model="form.school" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="是否学生">
            <el-radio v-for="item in dict.yes_status" :key="item.id" v-model="form.isStudent" :label="item.value">{{ item.label }}</el-radio>
          </el-form-item>
          <el-form-item label="公司">
            <el-input v-model="form.company" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="是否有房">
            <el-radio v-for="item in dict.yes_status" :key="item.id" v-model="form.houseStatus" :label="item.value">{{ item.label }}</el-radio>
          </el-form-item>
          <el-form-item label="是否有车">
            <el-radio v-for="item in dict.yes_status" :key="item.id" v-model="form.carStatus" :label="item.value">{{ item.label }}</el-radio>
          </el-form-item>
          <el-form-item label="家乡">
            <el-input v-model="form.hometown" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="工作地">
            <el-input v-model="form.workLocation" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="婚姻状态">
            <el-radio v-for="item in dict.marital_status" :key="item.id" v-model="form.maritalStatus" :label="item.value">{{ item.label }}</el-radio>
          </el-form-item>
          <el-form-item label="是否实名认证">
            <el-radio v-for="item in dict.yes_status" :key="item.id" v-model="form.isRealNameVerified" :label="item.value">{{ item.label }}</el-radio>
          </el-form-item>
          <el-form-item label="是否头像认证">
            <el-radio v-for="item in dict.yes_status" :key="item.id" v-model="form.isAvatarVerified" :label="item.value">{{ item.label }}</el-radio>
          </el-form-item>
          <el-form-item label="背景">
            <el-input v-model="form.background" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="标签">
            <el-input v-model="form.tags" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="上级id">
            <el-input v-model="form.parentId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="form.status" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="店铺状态">
            <el-input v-model="form.isShop" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="是否在线">
            <el-radio v-for="item in dict.yes_status" :key="item.id" v-model="form.isOnline" :label="item.value">{{ item.label }}</el-radio>
          </el-form-item>
          <el-form-item label="最后活跃时间">
            <el-date-picker v-model="form.lastActive" type="datetime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="是否认证">
            <el-radio v-for="item in dict.yes_status" :key="item.id" v-model="form.isVerified" :label="item.value">{{ item.label }}</el-radio>
          </el-form-item>
          <el-form-item label="所在城市">
            <el-input v-model="form.city" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="所在省份">
            <el-input v-model="form.province" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="id" />
        <el-table-column prop="phone" label="手机号" />
        <!--        <el-table-column prop="openid" label="微信openid" />-->
        <el-table-column prop="nickname" label="昵称" />
        <el-table-column prop="avatar" label="头像" />
        <el-table-column prop="gender" label="性别">
          <template slot-scope="scope">
            {{ dict.label.gender_status[scope.row.gender] }}
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" />
        <!--        <el-table-column prop="location" label="所在地" />-->
        <!--        <el-table-column prop="latitude" label="维度" />-->
        <!--        <el-table-column prop="longitude" label="经度" />-->
        <!--        <el-table-column prop="signature" label="签名" />-->
        <!--        <el-table-column prop="createdAt" label="创建时间" />-->
        <!--        <el-table-column prop="updatedAt" label="更新时间" />-->
        <!--        <el-table-column prop="password" label="密码" />-->
        <el-table-column prop="height" label="身高" />
        <!--        <el-table-column prop="constellation" label="星座" />-->
        <!--        <el-table-column prop="occupation" label="职位" />-->
        <!--        <el-table-column prop="income" label="收入" />-->
        <el-table-column prop="education" label="学历" />
        <el-table-column prop="school" label="学校" />
        <el-table-column prop="isStudent" label="是否学生">
          <template slot-scope="scope">
            {{ dict.label.yes_status[scope.row.isStudent] }}
          </template>
        </el-table-column>
        <!--        <el-table-column prop="company" label="公司" />-->
        <!--        <el-table-column prop="houseStatus" label="是否有房">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ dict.label.yes_status[scope.row.houseStatus] }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column prop="carStatus" label="是否有车">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ dict.label.yes_status[scope.row.carStatus] }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="hometown" label="家乡" />
        <!--        <el-table-column prop="workLocation" label="工作地" />-->
        <el-table-column prop="maritalStatus" label="婚姻状态">
          <template slot-scope="scope">
            {{ dict.label.marital_status[scope.row.maritalStatus] }}
          </template>
        </el-table-column>
        <el-table-column prop="isRealNameVerified" label="是否实名认证">
          <template slot-scope="scope">
            {{ dict.label.yes_status[scope.row.isRealNameVerified] }}
          </template>
        </el-table-column>
        <el-table-column prop="isAvatarVerified" label="是否头像认证">
          <template slot-scope="scope">
            {{ dict.label.yes_status[scope.row.isAvatarVerified] }}
          </template>
        </el-table-column>
        <!--        <el-table-column prop="background" label="背景" />-->
        <!--        <el-table-column prop="tags" label="标签" />-->
        <!--        <el-table-column prop="parentId" label="上级id" />-->
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            {{ dict.label.yes_status[scope.row.status] }}
          </template>
        </el-table-column>
        <!--        <el-table-column prop="isShop" label="店铺状态">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ dict.label.yes_status[scope.row.isShop] }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="isOnline" label="是否在线">
          <template slot-scope="scope">
            {{ dict.label.yes_status[scope.row.isOnline] }}
          </template>
        </el-table-column>
        <el-table-column prop="lastActive" label="最后活跃时间" />
        <!--        <el-table-column prop="isVerified" label="是否认证">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ dict.label.yes_status[scope.row.isVerified] }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="city" label="所在城市" />
        <el-table-column prop="province" label="所在省份" />
        <el-table-column v-if="checkPer(['admin','users:edit','users:del'])" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudUsers from '@/api/users'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { id: null, phone: null, openid: null, nickname: null, avatar: null, gender: null, age: null, location: null, latitude: null, longitude: null, signature: null, createdAt: null, updatedAt: null, height: null, constellation: null, occupation: null, income: null, education: null, school: null, isStudent: null, company: null, houseStatus: null, carStatus: null, hometown: null, workLocation: null, maritalStatus: null, isRealNameVerified: null, isAvatarVerified: null, background: null, tags: null, parentId: null, status: null, isShop: null, isOnline: null, lastActive: null, isVerified: null, city: null, province: null }
export default {
  name: 'Users',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['gender_status', 'yes_status', 'marital_status'],
  cruds() {
    return CRUD({ title: '会员管理', url: 'api/user', idField: 'id', sort: 'id,desc', crudMethod: { ...crudUsers }})
  },
  data() {
    return {
      permission: {
        add: ['admin', 'users:add'],
        edit: ['admin', 'users:edit'],
        del: ['admin', 'users:del']
      },
      rules: {
        // createdAt: [
        //   { required: true, message: '创建时间不能为空', trigger: 'blur' }
        // ]
      },
      queryTypeOptions: [
        { key: 'id', display_name: 'id' },
        { key: 'phone', display_name: '手机号' },
        { key: 'openid', display_name: '微信openid' },
        { key: 'nickname', display_name: '昵称' },
        { key: 'gender', display_name: '性别' },
        { key: 'age', display_name: '年龄' },
        { key: 'location', display_name: '所在地' },
        { key: 'latitude', display_name: '维度' },
        { key: 'longitude', display_name: '经度' },
        { key: 'signature', display_name: '签名' },
        { key: 'height', display_name: '身高' },
        { key: 'constellation', display_name: '星座' },
        { key: 'occupation', display_name: '职位' },
        { key: 'income', display_name: '收入' },
        { key: 'education', display_name: '学历' },
        { key: 'school', display_name: '学校' },
        { key: 'isStudent', display_name: '是否学生' },
        { key: 'company', display_name: '公司' },
        { key: 'houseStatus', display_name: '是否有房' },
        { key: 'carStatus', display_name: '是否有车' },
        { key: 'hometown', display_name: '家乡' },
        { key: 'workLocation', display_name: '工作地' },
        { key: 'maritalStatus', display_name: '婚姻状态' },
        { key: 'isRealNameVerified', display_name: '是否实名认证' },
        { key: 'isAvatarVerified', display_name: '是否头像认证' },
        { key: 'tags', display_name: '标签' },
        { key: 'parentId', display_name: '上级id' },
        { key: 'status', display_name: '状态' },
        { key: 'isShop', display_name: '店铺状态' },
        { key: 'isOnline', display_name: '是否在线' },
        { key: 'lastActive', display_name: '最后活跃时间' },
        { key: 'isVerified', display_name: '是否认证' }
      ]
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    [CRUD.HOOK.beforeToEdit](crud, form) {
      form.gender = form.gender !== null ? form.gender.toString() : '0'
      form.isStudent = form.isStudent !== null ? form.isStudent.toString() : '0'
      form.houseStatus = form.houseStatus !== null ? form.houseStatus.toString() : '0'
      form.carStatus = form.carStatus !== null ? form.carStatus.toString() : '0'
      form.isRealNameVerified = form.isRealNameVerified !== null ? form.isRealNameVerified.toString() : '0'
      form.isAvatarVerified = form.isAvatarVerified !== null ? form.isAvatarVerified.toString() : '0'
      console.log('婚姻状态', form.maritalStatus)
      form.maritalStatus = form.maritalStatus !== null ? form.maritalStatus.toString() : '0'
      form.isOnline = form.isOnline !== null ? form.isOnline.toString() : '0'
      form.isVerified = form.isVerified !== null ? form.isVerified.toString() : '0'
      return true
    }
  }
}
</script>

<style scoped>

</style>
